<template>
  <van-floating-bubble
    icon="filter-o"
    :gap="30"
    @click="onClick"
    :style="`background: ${isEmpty ? '#4c82fe' : '#faad14'}`"
  />
  <van-action-sheet v-model:show="show" title="条件搜索" safe-area-inset-bottom>
    <form-template
      class="search-form"
      submitText="查询"
      v-model:form="form"
      :options="options"
      @submit="onSubmit"
      @reset="onReset"
      reset
      clearable
    ></form-template>
  </van-action-sheet>
</template>

<script setup>
  const emit = defineEmits(['search', 'reset'])
  const props = defineProps({
    options: {
      type: Array,
      default: () => [],
    },
  })
  const show = ref(false)
  const form = ref({})
  const isEmpty = computed(() => {
    let isSearch = false
    for (const key in form.value) {
      if (Object.prototype.hasOwnProperty.call(form.value, key)) {
        if (form.value[key]) {
          isSearch = true
        }
      }
    }
    return !isSearch
  })
  const onClick = () => {
    show.value = true
  }
  const onSubmit = () => {
    emit('search', form.value)
    show.value = false
  }
  const onReset = () => {
    onSubmit()
    emit('reset')
    show.value = false
    if (form.value) {
    }
  }
</script>

<!-- <style scoped>
  .search-form {
    min-height: 45vh;
  }
</style> -->
<style>
  .van-floating-bubble {
    width: 88px;
    height: 88px;
    border-radius: 16px 16px 16px 16px;
  }
</style>
